<template name="jz">
	<view>
		<view class="top">
			<!-- <view class="navbar" :style="{ height: navBarHeight + 'px' }"><text style="font-size: 36upx;">职位</text></view> -->
			<image src="https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/%E7%BB%84%201042.png" mode=""></image>
			<view class="search">
				<view class="search-input">
					<text class="iconfont icon-sousuo"></text>
					<input class="text-normal" type="text" v-model="searchValue"  />

				</view>
			<!-- 	<button class="btn-cancel" @click="searchInput" >搜索</button> -->
				<view  class="btn-cancel" @click="searchInput">搜索</view>
			</view>
			<yzbfilterDropdown
				:menuTop="0"
				:filterData="filterData"
				:defaultSelected="defaultSelected"
				:updateMenuName="true"
				@confirm="confirm"
				dataFormat="Object"
				ref="filter"
			></yzbfilterDropdown>
		</view>
		<view class="body" >
			<text v-if="isAuth" style="text-decoration:underline;padding-left:40rpx" @click="getAuth">点我授权可获取与兼职工作地点距离</text>
			<template>
				<m-position listType="0" :positions="list" @click="positionDetail" :isAuth="isAuth"></m-position>
			</template>
			<view class="load-more-box">
				<uni-load-more v-if="status == '请求中'" status="正在加载..." :showIcon="true"></uni-load-more>
				<uni-load-more v-if="status == '没有更多'" status="没有更多了" :showIcon="false"></uni-load-more>
				<uni-load-more v-if="status == '暂无数据'" status="暂无数据" :showIcon="false"></uni-load-more>
				<uni-load-more v-if="status == '请求失败'" status="加载失败，点我重试" :showIcon="false" @click="reLoad"></uni-load-more>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations, mapGetters } from 'vuex';
import mPosition from '@/components/yzb/yzb-position.vue';
import yzbfilterDropdown from '@/components/yzb/yzb-filterDropdown.vue';
export default {
	components: {
		mPosition,
		yzbfilterDropdown
	},
	computed: {
		...mapState(['userInfo']),
		...mapGetters(['hasLogin'])
	},
	data() {
		return {
			statusBarHeight: 0,
			navBarHeight: 0,
			topHeight: 0,
			defaultSelected:[],
			list: [],
			status: '',
			isAuth:true,
			query: {
				current: 1,
				number: 20,
				wayModel: '',
				keyword: '',
				distinguish: '',
				moneyRangeMin: '',
				moneyRanges: '',
				filterData: '',
				longitude: '',
				latitude:'',
				placeholder:'',
				distance:''
			},

			indexArr: '',
			valueArr: '',

			searchValue: '',
			placeholder: '请输入岗位名称搜索',
			filterData: [
				{
					name: '薪资结算',
					type: 'hierarchy',
					child: [
						{
							name:"不限",
							id:""
						},{
							name:"日结",
							id:"日结"
						}
						,{
							name:"周结",
							id:"周结"
						},{
							name:"月结",
							id:"月结"
						}
					]
				},
				{
					name: '距离',
					type: 'hierarchy',
					child: [{
							name:"不限",
							id:"",
						},{
							name:"1km以内",
							id:"1000"
						},{
							name:"3km以内",
							id:"3000"
						},{
							name:"5km以内",
							id:"5000"
						},{
							name:"10km以内",
							id:"10000"
						}]
				},
				// {
				// 	name: '薪资类型',
				// 	type: 'hierarchy',
				// 	child: [{
				// 			name:"不限",
				// 			id:"",
				// 		},{
				// 			name:"日结",
				// 			id:"日结"
				// 		},{
				// 			name:"月结",
				// 			id:"月结"
				// 		}]
				// },
				{
					name: '所属区域范围',
					type: 'hierarchy',
					child: [
						{
							name: '不限',
							id: ''
							
						},{
							name: '芙蓉区',
							id: '芙蓉区'
							
						},{
							name: '天心区',
							id: '天心区'
						},
						{
							name: '岳麓区',
							id: '岳麓区'
						},
						{
							name: '开福区',
							id: '开福区'
						},
						{
							name: '雨花区',
							id: '雨花区'
						},
						{
							name: '望城区',
							id: '望城区'
						},
						{
							name: '长沙县',
							id: '长沙县'
						},{
							name: '浏阳市',
							id: '浏阳市'
						},{
							name: '宁乡市',
							id: '宁乡市'
						}
					]
				}
			]
		};
	},
	created() {
		//获取手机状态栏高度
		this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
		//#ifdef MP-WEIXIN
		this.navBarHeight = uni.getMenuButtonBoundingClientRect().bottom;
		this.topHeight = this.navBarHeight + uni.upx2px(80);
		//#endif
	},
	
	onLoad(options) {
		this.locationAuth();
	},
	onShow() {
		this.locationAuth();
		
	},

	onPullDownRefresh() {
		this.query.current = 1;
		this.getDatasByLoc();
	},

	onReachBottom() {
		if(this.status!="没有更多")
			this.getDatasByLoc('add');
	},

	methods: {
		//需要位置信息的
		getDatasByLoc(type = 'refresh', pulldown = false) {
			if (this.location) {
				this.query.latitude = this.location.latitude;
				this.query.longitude = this.location.longitude;
			} 
			this.getPositionList(type, pulldown);
		},
			confirm(indexArr) {
				console.log("122121",indexArr.value[0][0])
				console.log("13333",indexArr.value[1][0])
				
				this.query.wayModel=indexArr.value[0][0];//薪资结算
				this.query.distance = indexArr.value[1][0]; //距离
				this.query.moneyRanges=indexArr.value[2][0];//薪资范围
				
				
				this.getPositionList();
		},
				
		async getPositionList(type = 'refresh', pulldown = false) {
			this.status = '请求中';
			if (type == 'refresh') {
				this.query.current = 1;
			} else {
				this.query.current++;
			}
			
			let data = await this.$apis.getPostList(this.query);
			
			if (data) {
				if (type == 'refresh') {
					this.list = [];
				}
				if (pulldown) {
					uni.stopPullDownRefresh();
				}
				this.list = this.list.concat(data || []);
				this.changeStatus(data);
			}
		},

		

		// 修改请求状态
		changeStatus(data) {
			if (this.list.length === 0) {
				this.status = '暂无数据';
			} else if (this.query.number > data.length) {
				this.status = '没有更多';
			} else {
				this.status = '请求更多';
			}
		},
			//查看详情
		positionDetail(item) {
			this.$mRouter.push({
				route: this.$mRoutesConfig.positionDetail,
				query: {
					id: item.id
				}
			});
					
		},

		searchInput(e) {
			console.log('searchInput', this.searchValue);
			this.query.placeholder=this.searchValue;
			this.getPositionList();
			if (this.searchValue) {
				this.query.keyword = this.searchValue;
				this.query.page = 1;
				this.list = [];
				
				
				
			} else {
				this.cancelSearch();
			}
		},
		// 取消搜索
		cancelSearch() {
			//this.$refs.filter.initMenu();
			this.searchValue = '';
			this.query.keyword = '';
			//this.query.wayModel='';
			this.query.page = 1;
			this.list = [];
			this.getPositionList();
		},
		/**
		 * 位置授权
		 */
		locationAuth() {
			let that = this;
			uni.getSetting({
				success(res) {
					if (res.authSetting['scope.userLocation']) {
						console.log('userLocation位置功能已授权');
						that.isAuth=false;
						that.getPosition();
						// 如果已授权,直接获取对应参数
					} else if (!res.authSetting['scope.userLocation']) {
						// 说明此时要获取的位置功能尚未授权,
						// 则设置进入页面时主动弹出，直接授权
						that.isAuth=true;
						that.getDatasByLoc();
					}
				},
				fail() {
					console.log('获取授权信息授权失败');
				}
			});
		},//获取定位信息
		getAuth(){
			let that = this;
			uni.authorize({
				scope: 'scope.userLocation',
				success(res) {
					// 授权成功
					console.log(res);
					that.getPosition();
					// 成功后获取对应的位置参数
				},
				fail() {
					console.log('位置授权失败');
					uni.showModal({
						content: '检测到您没打开获取信息功能权限，是否去设置打开？',
						confirmText: '确认',
						cancelText: '取消',
						success: res => {
							console.log(res);
							if (res.confirm) {
								uni.openSetting({
									success: res => {
										console.log('res', res);
										that.getPosition();
									},
									fail: err => {
										console.log(err);
									}
								});
							} else {
								console.log('取消');
							}
						}
					});
				}
			});
		},
		getPosition() {
			console.log("=========获取定位信息========================")
			const that = this;
			uni.getLocation({
				type: 'wgs84',
				success: function(lb) {
							that.location = {
								latitude : lb.latitude,
								longitude : lb.longitude
							};
							getApp().globalData.location = that.location;
							getApp().globalData.currentLocation = JSON.parse(JSON.stringify(that.location));
							//保存到本地
							that.$db.set('location', that.location);
							that.getDatasByLoc();
				},
				fail: function(error) {
					console.log('=======error=========', error);
					that.getDatasByLoc();
				}
			});
		}
	}
};
</script>
<style lang="scss">


.top {
	width: 100%;
	// height: 180upx;
	//position: fixed;
	top: 0;
	z-index: 999;
	//display: flex;
	//flex-direction: column;
	image{
		 z-index:-1; 
		 width:100%; 
		 position: fixed; 
		 top:0; 
	}
	.navbar {
		height: 100upx;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		text {
			color: #000;
			font-weight: bolder;
		}
	}
}

.search {
	width: 100%;
	display: flex;
	height: 90upx;
	z-index: 999;
	flex-direction: row;
	color: $font-color-999;
	align-items: center;
	justify-content: center;
	.icon-sousuo {
		color: $font-color-999;
		font-size: $uni-font-size-base;
		margin: 0 15upx;
	}
	.search-input {
		width: 77%;
		height: 65upx;
		border-radius: 50upx;
		display: flex;
		flex-direction: row;
		background-color: #ffffff;
		align-items: center;
	}
	.search-input image {
		width: 35upx;
		height: 35upx;
		margin-right: 10upx;
	}
	.search-input input {
		width: 65%;
		font-size: 28upx;
		color: $font-color-333;
	}

	.btn-search {
		margin-left: 20upx;
	}

	.btn-cancel {
		margin-left: 20upx;
	}
}
</style>
